<template>
  <div style="margin-bottom: 50px">
    <el-row :gutter="20">
    <el-col :span="16">
        <div class="play">
            <h2>mv详情</h2>
            <video :src="playUrl" controls></video>
        </div>
        <div class="detail">
            <div class="img">
                <img :src="artsit.picUrl" alt="">
                <p style="margin-left: 20px">{{mvInfo.artistName}}</p>
            </div>
            <h3 class="info" style="margin: 30px 10px">{{mvInfo.name}}</h3>
            <div class="t"><span>发布:{{mvInfo.publishTime}}</span><span>播放:{{mvInfo.playCount}}</span></div>
            <div class="desc"><p>{{mvInfo.desc}}</p></div>
        </div>
        <div class="comment">
            <h3>精彩评论({{hots}})</h3>
            <span class="num"></span>
            <div class="itemt" v-for="item in hotComment" :key="item.id">
                <img :src="item.user.avatarUrl" alt="">
                <div class="talk">
                    <span style="color: blue">{{item.user.nickname}}: </span>
                    <span style="display:inline;">{{item.content}}</span>
                </div>
                <div v-if="item.beReplied.length!=0" class="reply" style="background: gray">
                    <span style="color: blue;margin-left: 20px;">{{item.beReplied[0].user.nickname}}</span>
                    <span style="display:inline;">{{item.beReplied[0].content}}</span>
                </div>
            </div>
            <h3>最新评论({{total}})</h3>
            <span class="num"></span>
            <div class="itemt" v-for="i in newComment" :key="i.id">
                <img :src="i.user.avatarUrl" alt="">
                <div class="talk">
                    <p style="color: blue">{{i.user.nickname}}: </p>
                    <p style="display:inline;">{{i.content}}</p>
                </div>
                <div v-if="i.beReplied.length!=0" class="reply" style="background: gray">
                    <p style="color: blue;margin-left: 20px;">{{i.beReplied[0].user.nickname}}: </p>
                    <p style="display:inline;">{{i.beReplied[0].content}}</p>
                </div>
            </div>
          </div>
    </el-col>
    <el-col :span="8">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>相关推荐</span>
        </div>
        <div v-for="m in miniMv" :key="m.id" class="text item" @click="goPlay(m.id)">
            <img :src="m.cover" alt="">
            <div class="txt">
                <p style="margin-left:5px">{{m.name}}</p>
                <div style="font-size: 14px;color: #ccc;margin-left: 3px;">{{m.artistName}}</div>
            </div>  
            <span class="count"><i></i>{{m.playCount}}<span class="time">{{m.duratoin}}</span></span>
        </div>
        </el-card>
    </el-col>
    </el-row>
    
  </div>
</template>

<script>
export default {
    name: 'MvDetil',
    data(){
        return{
            playUrl: '',
            // 相关mv
            miniMv: [],
            // mv详情
            mvInfo: [],
            artsit: {},
            // 热门评论
            hotComment: [],
            // 最新评论
            newComment: [],
            hots: '',
            total: '',
            page: '1'
        }
    },
    created(){
        this.$axios({
            url: '/mv/url',
            method: 'get',
            params: {
                id: this.$route.query.q
            }
        }).then(res=>{
            // console.log(res)
            this.playUrl = res.data.data.url
        })
        // 相关mv
        this.$axios({
            url: '/simi/mv',
            method: 'get',
            params: {
                mvid: this.$route.query.q
            }
        }).then(res=>{
            // console.log(res)
            this.miniMv = res.data.mvs
            for(let i=0;i<this.miniMv.length;i++){
            // 获取总时长(毫秒)
            let duration = this.miniMv[i].duration
            let min = parseInt(duration/1000/60)
            min = (min<10?'0'+min:min)
            let sec = parseInt(duration/1000%60)
            sec = (sec<10?'0'+sec:sec)
            this.miniMv[i].duration = min+':'+sec
            this.miniMv[i].playCount = this.miniMv[i].playCount>10000?parseInt(this.miniMv[i].playCount/10000)+'万':this.miniMv[i].playCount
            }
        })
        // mv详情
        this.$axios({
            url: '/mv/detail',
            method: 'get',
            params: {
                mvid: this.$route.query.q
            }
        }).then(res=>{
            // console.log(res.data.data)
            this.mvInfo = res.data.data
            for(let i=0;i<this.mvInfo.length;i++){
            this.mvInfo[i].playCount = this.mvInfo[i].playCount>10000?parseInt(this.mvInfo[i].playCount/10000)+'万':this.mvInfo[i].playCount
            }
            // 获取歌手id
            this.$axios({
                url: '/artists',
                method: 'get',
                params: {
                    id: this.mvInfo.artists[0].id
                }
            }).then(res=>{
                // console.log(res)
                this.artsit = res.data.artist
            })
        })
        this.$axios({
            url: '/comment/hot',
            method: 'get',
            params: {
                id: this.$route.query.q,
                type: 1
            }
        }).then(res=>{
            // console.log('111',res.data)
            this.hotComment = res.data.hotComments
            // 评论个数
            this.hots = res.data.total
        })
        this.$axios({
            url: '/comment/mv',
            method: 'get',
            params: {
                id: this.$route.query.q,
                limit: 10,
                offset: (this.page-1)*10
            }
        }).then(res=>{
            // console.log('111',res.data)
            this.newComment = res.data.comments
            // 总评论个数
            this.total = res.data.total
        })
    },
    methods: {
        goPlay(id){
            this.$router.push('/discovery')
            this.$router.push(`/mvpage?q=${id}`)
            this.$router.go(0)
        }
        
    }
}
</script>

<style lang="less" scoped>
.play{
    width: 100%;
    video{
        width: 100%;
    }
}
.item{
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    cursor: pointer;
    img{
        width: 60%;
    }
    .txt{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        p{
            display: inline;
            font-weight: bold;
        }
        div{
            margin-top: 30px;
        }
    }
    .count{
        position: absolute;
        left: 40%;
        color: #fff;
        font-weight: normal;
        font-size: 14px;
        .time{
            position: absolute;
            bottom: 0;
        }
    }
}
.detail{
    .img{
        margin-top: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 80%;
        img{
            width: 30%;
            border-radius: 50%;
        }
        p{
            display: inline;
            font-weight: bold;
        }
    }
    .t{
        font-size: 12px;
        color: #ccc;
        span{
            margin-right: 30px;
        }
        margin-bottom: 30px;
    }
    
}
.comment{
    .itemt{
    position: relative;
    margin: 10px auto;
    img{
        width: 4%;
        border-radius: 50%;
        margin: 20px;
    }
    .talk{
        width: 80%;
        position: absolute;
        top: 20%;
        left: 10%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .reply{
        width: 90%;
        margin-left: 10%;
        margin-top: 10px;
        border-radius: 10px;
    }

    
}
}
</style>